<template lang="pug">
  form.search-base(@submit.prevent="submitSearch")
    .search-input-base
      .search-btn
        img(:src="searchIcon")
      input.search-input(placeholder="输入您要的商品",v-model="value")
    .search-btn(@click="submitSearch")
      | 查找
</template>

<script>
import searchIcon from '../assets/icons/search-gray.svg'

export default {
  name: 'SearchGoods',
  data () {
    return {
      value: '',
      searchIcon: searchIcon
    }
  },
  methods: {
    submitSearch () {
      if (this.value) {
        this.$router.push({name: 'GoodResults', query: {q: this.value}})
      }
    }
  }
}
</script>

<style lang="sass">
@import '../styles/color.sass';
.search-base
  padding: 10px
  border-bottom: $gray-bg 1px solid
  display: flex
  flex-direction: row
  justify-content: space-between
  align-items: center
  .search-input-base
    flex: 1 1
    background: $input-background
    display: flex
    flex-direction: row
    justify-content: space-between
    align-items: center
    border-radius: 4px
    height: 42px
    input.search-input
      background: none
      border: none
      width: 100%
      height: 32px
      padding-left: 5px
      color: $gray
      font-size: 1em
      &:focus
        outline: none
        box-shadow: none
      &::-webkit-input-placeholder
        color: $gray
  .search-btn
    padding: 3px 10px
    color: $gray
</style>
